<template>
  <a-layout class="carbon-matching-container">
    <a-row gutter="8">
      <!-- 左侧区域：选择行业和碳资产类型 -->
      <a-col :span="8">
        <a-card title="碳资产匹配管理" style="min-height: 880px" class="form-card">
          <a-form layout="vertical">
            <a-form-item label="选择企业园区行业类型:">
              <a-select
                v-model="selectedIndustry"
                @change="fetchCarbonAssetTypes"
                placeholder="请选择行业"
                style="width: 270px"
              >
                <a-select-option
                  v-for="industry in industries"
                  :key="industry.id"
                  :value="industry.name"
                >
                  {{ industry.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="可开发的碳资产类型:">
              <!-- <a-tree
                checkable
                v-model:checkedKeys="checkedCarbonAssets"
                :treeData="carbonAssetTypes"
              /> -->
              <a-select
                v-model="selectedIndustry"
                @change="fetchCarbonAssetTypes"
                placeholder="请选择行业"
                style="width: 270px"
              >
                <a-select-option
                  v-for="industry in industries"
                  :key="industry.id"
                  :value="industry.name"
                >
                  {{ industry.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="saveSelectedAssets">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 右侧区域：显示选择的碳资产信息 -->
      <a-col :span="16">
        <a-card title="碳资产信息" class="info-card">
          <p>已选择的行业: {{ selectedIndustry || "未选择" }}</p>
          <p>已选择的碳资产类型:</p>
          <ul>
            <li v-for="asset in checkedCarbonAssets" :key="asset">{{ asset }}</li>
          </ul>
          <p>请根据企业需求选择适合的碳资产类型，并点击保存。</p>
        </a-card>
      </a-col>
    </a-row>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";

// 模拟行业数据
const industries = ref([
  { id: 1, name: "能源行业" },
  { id: 2, name: "制造行业" },
  { id: 3, name: "交通运输行业" },
]);

const selectedIndustry = ref(null);
const carbonAssetTypes = ref([]);
const checkedCarbonAssets = ref([]);

// 模拟行业对应的碳资产类型
const carbonAssetsMapping = {
  能源行业: [
    {
      title: "能源类",
      key: "energy",
      children: [
        { title: "可再生能源", key: "renewable" },
        { title: "传统能源", key: "traditional" },
      ],
    },
    { title: "碳捕集技术", key: "ccs" },
  ],
  制造行业: [
    { title: "工艺过程优化类", key: "process" },
    { title: "废物利用", key: "waste" },
  ],
  交通运输行业: [
    { title: "清洁交通", key: "clean_transport" },
    { title: "电动车辆", key: "ev" },
  ],
};

// 根据选择的行业类型动态加载碳资产类型
const fetchCarbonAssetTypes = (industry) => {
  carbonAssetTypes.value = carbonAssetsMapping[industry] || [];
  checkedCarbonAssets.value = []; // 清空已选中的资产类型
};

// 保存用户选择的碳资产类型
const saveSelectedAssets = () => {
  console.log("已选择的碳资产类型:", checkedCarbonAssets.value);
  // 在这里添加保存逻辑
};
</script>

<style scoped>
.carbon-matching-container {
  /* padding: 16px; */
  height: 100vh;
}

.form-card,
.info-card {
  height: 100%;
}
</style>
